import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet, ImageBackground } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomTextEllipsize from 'src/components/custom-text-ellipsize/index'
import { generateFuzzyQuery } from '../../utils/FuzzyQueryUtil'
import TagView from '../tag-view/index'
import { getDistance, getSettlementMethod, getUserAvatorLocalB, unitList } from 'src/utils/ConfigUtil'
import { formatTime, todayYestodayTime, utilToKilo } from '../../utils/TimeUtil'
import JobType from 'src/components/job-type'
import DefaultImage from 'src/components/image/DefaultImage'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'

export default class JobCell extends React.PureComponent {
  static propTypes = {
    item: PropTypes.object,
    landmark: PropTypes.object,
    isCollection: PropTypes.bool,
    showJobType: PropTypes.bool,
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    tagViewStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    threeDotPress: PropTypes.func,
    showAddressByCurrentLocation: PropTypes.bool
  }

  static defaultProps = {
    isCollection: false,
    showJobType: false,
    showAddressByCurrentLocation: true
  }

  /**
   * 获取地址
   * */
  _getAddress = () => {
    const { landmark: { cityName, currentLocation = {} }, item: { postWorkLocations = [], distance }, showAddressByCurrentLocation } = this.props
    const address = {
      addressName: '',
      distance: '',
      areaName: ''
    }
    if (postWorkLocations.length > 0) {
      let workLocations = postWorkLocations
      if (showAddressByCurrentLocation) {
        // 根据当前所在城市过滤地址信息begin
        const cityReg = generateFuzzyQuery(cityName)
        workLocations = postWorkLocations.reduce((workLocations, currentValue) => {
          if (cityReg.test(currentValue.cityName) || cityReg.test(currentValue.address)) { // 如果城市或者地址里面包含当前的位置，就选中
            workLocations.push(currentValue)
          }
          return workLocations
        }, [])
        // 根据当前所在城市过滤地址信息end
      }
      if (workLocations.length > 0) {
        address.addressName = workLocations[0].addressSimple || workLocations[0].address
        address.areaName = workLocations[0].areaName
        address.distance = distance ? `${Number(distance / 1000).toFixed(1)}km` : getDistance(currentLocation.lat, currentLocation.lng, workLocations[0].latitude, workLocations[0].longitude)
      }
    }
    return address
  }

  render () {
    const { item, isCollection, style, tagViewStyle, showJobType, threeDotPress } = this.props
    const basicInfoModel = item.basicInfoModel
    const settlementMethodObj = item && item.basicInfoModel ? getSettlementMethod(item.basicInfoModel.settlementMethod) : {}
    const unit = item && item.basicInfoModel ? unitList[item.basicInfoModel.unit ? item.basicInfoModel.unit : item.basicInfoModel.settlementMethod * 1 + 1] : {}
    const address = this._getAddress()
    const { bossInfo = {} } = item

    return (
      <Fragment>
        <View style={[styles.cell].concat(style)}>
          <View style={styles.topView}>
            <DefaultImage
              style={styles.defaultImg} source={{ uri: bossInfo.headImg }}
              errorSource={getUserAvatorLocalB()} />
            <View style={styles.topCenterView}>
              <Text style={styles.boseUserName}>{bossInfo.userName}</Text>
              <View style={styles.bossPosition}>
                {/* <Text style={[styles.AbbreviationPosition, { maxWidth: ScaleS(150) }]} numberOfLines={1} ellipsizeMode={'tail'}>{item.companyName}</Text>
              <Text style={styles.AbbreviationPosition}>·</Text> */}
                <Text style={styles.AbbreviationPosition}>{bossInfo.position}</Text>
              </View>
            </View>
            <CustomButton style={styles.threeDotView} onPress={threeDotPress} params={item}>
              <CustomImage style={styles.threeDotImg} source={require('src/imgC/home/more.png')} />
            </CustomButton>
          </View>
          <View style={styles.bottomView}>
            <View style={styles.top}>
              <View style={styles.topLeft}>
                <CustomTextEllipsize style={styles.name} text={basicInfoModel.name} />
                {
                  parseInt(item.isFast) === 1 && (
                    <View style={styles.fastView}>
                      <View style={styles.fastBgView} />
                      <Text style={styles.fastText}>顶</Text>
                    </View>
                  )
                }
              </View>
              <View style={styles.salaryView}>
                <Text style={styles.price}>
                  {`${utilToKilo(basicInfoModel.salary)}${basicInfoModel.salary >= 10000 ? '' : '元'}·${unit}`}
                </Text>
              </View>
            </View>
            <View style={[styles.bottom].concat(tagViewStyle)}>
              <View style={styles.bottomLeft}>
                {
                  isCollection ? (
                    <TagView
                      style={styles.tagView}
                      tagLabel={Number(basicInfoModel.practiceLabel === 1) ? '实习' : Number(basicInfoModel.type) === 1 ? '全职' : '兼职'} />
                  ) : (
                    <Text style={styles.tagItemText}>{'#' + address.areaName || item.area}</Text>
                  )
                }
                <Text style={styles.tagItemText}>{'#' + basicInfoModel.category}</Text>
                <Text style={styles.tagItemText}>{'#' + settlementMethodObj.short}</Text>
              </View>
              <View style={styles.bottomRightView}>
                {
                  isCollection && !!item.gmtCreate && (
                    <Text
                      style={styles.bottomRightText}>{todayYestodayTime(new Date(formatTime(item.gmtCreate)).getTime())}</Text>
                  )
                }
              </View>
              {!!basicInfoModel.interviewState && <Text style={styles.bottomRight}>已面试</Text>}
            </View>
            {
              this.renderBottom()
            }
          </View>
        </View>
        <ImageBackground style={styles.bottomAddressView} source={require('src/imgC/home/location_bg.png')}>
          <View style={styles.bottomAddressViewContent}>
            <View style={styles.addressView}>
              <CustomImage style={styles.locationImg} source={require('src/imgC/home/location_icon_gray.png')} />
              <Text style={[styles.tagItemText, { marginRight: 0, marginLeft: ScaleS(5) }]}>{address.distance} · </Text>
            </View>
            <CustomTextEllipsize style={styles.addressText} text={address.addressName} />
          </View>
        </ImageBackground>
      </Fragment>
    )
  }

  /**
   * 渲染底部
   */
  renderBottom () {
    return null
  }
}

const styles = StyleSheet.create({
  cell: {
    width: '100%',
    paddingTop: ScaleS(36),
    paddingHorizontal: ScaleS(20)
  },
  topView: {
    alignItems: 'center',
    flexDirection: 'row'
  },
  defaultImg: {
    width: ScaleS(40),
    height: ScaleS(40),
    resizeMode: 'cover',
    borderRadius: ScaleS(20)
  },
  topCenterView: {
    marginLeft: ScaleS(10),
    flex: 1
  },
  boseUserName: {
    color: '#3C3C3C',
    fontSize: ScaleT(14),
    fontWeight: '500'
  },
  bossPosition: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: ScaleS(5)
  },
  AbbreviationPosition: {
    color: '#bdbdbd',
    fontSize: ScaleT(12),
    fontWeight: '400'
  },
  threeDotView: {
    height: ScaleS(16),
    position: 'relative'
  },
  threeDotImg: {
    position: 'absolute',
    width: ScaleS(20),
    height: ScaleS(16),
    bottom: ScaleS(10),
    right: ScaleS(0)
  },
  bottomView: {
    marginLeft: ScaleS(50),
    marginTop: ScaleS(23)
  },
  top: {
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  topLeft: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  name: {
    flex: 1,
    fontSize: ScaleT(16),
    fontWeight: '500',
    color: '#3c3c3c'
  },
  fastView: {
    marginLeft: ScaleS(8),
    alignItems: 'center',
    justifyContent: 'center'
  },
  fastBgView: {
    backgroundColor: '#FFE400',
    width: ScaleS(23),
    height: ScaleS(4)
  },
  fastText: {
    color: '#000000',
    fontSize: ScaleT(12),
    fontWeight: '500',
    position: 'absolute'
  },
  tagImg: {
    marginTop: ScaleS(4),
    marginLeft: ScaleS(4),
    width: ScaleS(18),
    height: ScaleS(21),
    resizeMode: 'cover'
  },
  topRight: {
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  salaryView: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: ScaleS(20)
  },
  price: {
    fontSize: ScaleT(16),
    fontWeight: '500',
    color: '#FADE25'
  },
  tagItemText: {
    color: '#bdbdbd',
    fontSize: ScaleT(14),
    fontWeight: '400',
    marginRight: ScaleS(15)
  },
  cellCenter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginTop: ScaleS(16)
  },
  leftAddress: {
    color: '#999999',
    fontSize: ScaleT(13),
    fontWeight: '400',
    maxWidth: ScaleS(230)
  },
  rightDistance: {
    color: '#999999',
    fontSize: ScaleT(13),
    fontWeight: '400'
  },
  bottom: {
    marginTop: ScaleS(10),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  bottomLeft: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-start',
    flexWrap: 'wrap'
  },
  tagView: {
    marginRight: ScaleS(15)
  },
  tagText: {
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#999999',
    lineHeight: ScaleS(28)
  },
  bottomRightView: {},
  bottomRightText: {
    color: '#000000',
    fontSize: ScaleT(12),
    fontWeight: '400'
  },
  bottomRight: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#444444',
    lineHeight: ScaleS(28)
  },
  bottomAddressView: {
    width: '100%',
    height: ScaleS(39),
    marginTop: ScaleS(13)
  },
  bottomAddressViewContent: {
    width: '100%',
    height: ScaleS(39),
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    paddingHorizontal: ScaleS(20)
  },
  addressView: {
    marginLeft: ScaleS(50),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  locationImg: {
    width: ScaleS(11),
    height: ScaleS(16)
  },
  addressText: {
    // width: ScaleS(170),
    flex: 1,
    color: '#bdbdbd',
    fontSize: ScaleT(13),
    fontWeight: '400',
    textAlign: 'left'
  }
})
